<!--全部视频-->
<template>
    <div class="allVideobox">
        <!--<goback></goback>-->
        <videoHeader></videoHeader>
        <div class="videoBox">
            <p class="videoLine">
                视频
                <i class="line"></i>
            </p>
            <div class="title">播放全部</div>
            <div class="videoall" v-if="list.length != 0">

                <div class="vidoeitem" v-for="(item, index) in list" :key="index" @click="videoDetail(item)">
                    <img :src="item.wholeImage"/>
                    <p class="desc">{{ item.subject }}</p>
                    <p class="timer">{{ dayjs(item.recordStartTime) }}</p>
                    <div class="bofanPop">
                        <img class="bofangBtn" :src="PIC_URL + '/experience/bofang.png'" width="100%"/>
                    </div>
                </div>


            </div>
            <div v-else style="width:100%;text-align:center;margin:50px auto;">
                无数据
            </div>
        </div>
        <!--        <el-pagination
                    background
                    class="paginationBox"
                    @current-change="handleCurrentChange"
                    :current-page="params.currentPage"
                    :page-size="params.pageSize"
                    layout="prev,pager,next,jumper,slot"
                    :total="total"
                >
                    <div
                        class="ensure-btn"
                        @click="clickEnter(params.currentPage, params.pageSize)"
                    >
                        GO
                    </div>
                    <div class="countPage">共{{ countPage }}页</div>
                </el-pagination>-->
    </div>
</template>
<script>
import {openWeb, windowOpen} from "@/common/common";
import dayjs from "dayjs";
import videoHeader from "../component/videoHeader";
import goback from "../component/goback";

import {queryRecordliveListByPage} from "../script/api";

export default {
    data() {
        return {
            configId: "",
            params: {
                //pageSize: 9,
                //currentPage: 1,
                configId: "",
            },
            total: 0,
            list: [],
            countPage: 0, //总页数
        };
    },
    mounted() {
        this.params.configId = this.$route.query.configId;
        this.configId = this.$route.query.configId;
        this.queryRecordliveListByPage(); //视频
    },
    methods: {
        dayjs(val) {
            return dayjs(Number(val)).format("MM-DD HH:mm");
        },
        //视频数据
        async queryRecordliveListByPage() {
            let back = await queryRecordliveListByPage(this.params);

            if (back.status == 1 || back.status == '1') {
                this.list = back.data;
                //this.total = back.data.pageBean.countResult;
                //this.countPage = back.data.pageBean.page;
            }
        },
        // 播放详情
        videoDetail(item, type) {

            let configId = type == 1 ? item.id : item.configId;

            if (item.playbackLink) {
                windowOpen(item.playbackLink, item.channelName);
            } else {
                this.$router.push({
                    path: "/videoTtv",
                    query: {
                        configId: configId,
                        path: 1,
                        videoId: item.videoId,
                    },
                });
            }
        },
        handleCurrentChange(val) {
            this.params.currentPage = val;
            this.queryRecordliveListByPage();
        },
        //分页GO
        clickEnter(page, limit) {
            this.params.currentPage = page++;
            this.params.pageSizes = limit;
            this.queryRecordliveListByPage();
        },
    },
    components: {videoHeader, goback},
    beforeRouteLeave(to, from, next) {

        if (to.name == "Home") {
            from.meta.keepAlive = false;
        } else {
            from.meta.keepAlive = true;
        }
        next();
    }
};
</script>

<style scoped lang="scss">

.allVideobox {
    max-width: 860px;
    background: #ffffff;
    height: 100%;
    margin: auto;
    box-sizing: border-box;

    .videoBox {
        margin-top: 24px;

        .videoLine {
            width: 100%;
            line-height: 52px;
            border-bottom: 1px solid #cccccc;
            padding: 0 12px;
            margin-bottom: 27px;
            box-sizing: border-box;

            .line {
                display: block;
                width: 34px;
                height: 4px;
                margin-bottom: -2px;
                background: #000000;
            }
        }

        .title{
            padding-left: 30px;
        }


        .videoall {
            width: 800px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .vidoeitem {
                flex: 0 0 362px;
                position: relative;
                display: inline-block;
                /*width: 362px;*/
                line-height: 30px;
                color: #0c0d0f;
                font-size: 16px;
                /*margin: 27px 19px 0px 0;*/
                margin-top: 26px;
                cursor: pointer;
                box-sizing: border-box;

                img {
                    width: 100%;
                    height: 207px;
                }

                .desc {
                    height: 38px;
                    line-height: 20px;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    font-size: 14px;
                    font-weight: 500;
                }

                .timer {
                    color: #7a7a7a;
                    text-align: right;
                    font-size: 12px;
                }

                .bofanPop {
                    width: 362px;
                    height: 207px;
                    position: absolute;
                    top: 0px;
                    background-color: rgba(0, 0, 0, 0.7);

                    .bofangBtn {
                        width: 57px;
                        height: 57px;
                        position: absolute;
                        transform: translate(142px, 68px);
                    }
                }
            }


            .vidoeitem:nth-child(3n) {
                margin-right: 0;
            }
        }
    }

    .paginationBox {
        text-align: center;
        margin: 96px 0;
        display: flex;
        justify-content: center;

        .ensure-btn {
            width: 31px;
            line-height: 26px;
            border: 1px solid #8b8c8b;
            margin: 0 10px;
            font-size: 16px;
            color: #666666;
            border-radius: 2px;
            cursor: pointer;
        }

        .countPage {
            line-height: 28px;
            font-size: 16px;
            color: #666666;
        }
    }
}
</style>

<style>
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    background: transparent;
    border: 1px solid #8b8c8b;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #d72122;
    border: 1px solid #d72122;
}
</style>
